<template>
	<view class="content">
		<view class="tips">上传本人真实视频</view>
		<view class="cover-wrap" @click="previewVideo">
			<image class="cover-image" :src="coverImage" mode="aspectFill"></image>
			<image v-show="form.file != ''" class="player-icon" src="/static/img/player_icon.png" mode=""></image>
		</view>
		<view class="btn-wrap">
			<button class="album" type="primary" @click="upload('album')">本地上传</button>
			<button class="camera" type="default" @click="upload('camera')">拍摄上传</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				form: {
					file: '',
				},
				coverImage: '/static/img/auth.png',
				qiniuToken: '',
				domain: '',
			}
		},
		onLoad(options) {
			this.userInfo = JSON.parse(options.userinfo)
		},
		onReady() {
			this.getQiniuToken();
		},
		onNavigationBarButtonTap(e) {
			if (this.form.file == '') {
				uni.showToast({
					title: '请上传视频',
					position: 'bottom',
					icon: 'none'
				});
				return false;
			}
			uni.showLoading({
				title: '',
			});
			this.$api.api.ajaxData({
				method: 'V1.UserAuth',
				uid: this.userInfo.id,
				token: this.userInfo.token,
				type: '2',
				file: this.form.file,
			}, res => {
				uni.hideLoading();
				uni.showToast({
					title: res.msg,
					position: 'bottom',
					icon: 'none'
				});
				if (res.status) {
					uni.$emit('my-page', {
						type: 'update',
					})
					uni.navigateBack({
						delta: 1
					})
				}
			}, err => {
				uni.hideLoading();
				uni.showToast({
					title: '网络错误，请稍后再试',
					position: 'bottom',
					icon: 'none'
				});
			})
		},
		methods: {
			getQiniuToken: function () {
				this.$api.api.ajaxData({
					method: 'V1.QiniuToken',
					uid: this.userInfo.id,
					token: this.userInfo.token,
				}, res => {
					if (res.status) {
						this.qiniuToken = res.data.token
						this.domain = res.data.domain
					}
				})
			},
			
			upload: function (type) {
				uni.chooseVideo({
					count: 1,
					sourceType: [type],
					success: res => {
						this.uploadFile(res.tempFilePath);
					}
				});
			},
			
			uploadFile: function (file) {
				var key = 'file_' + this.$api.api.getRandom(0, 100000000) + '-t_' + (+new Date());
				uni.showLoading({
					title: ''
				})
				var uploadTask = uni.uploadFile({
					url: this.QINUUPLOADURL,
					filePath: file,
					name: 'file',
					formData: {
						'token': this.qiniuToken,
						'key': key
					},
					success: res => {
						uni.hideLoading();
						if (res.statusCode == 200) {
							let dataObject = JSON.parse(res.data)
							this.form.file = dataObject.key
							this.coverImage = this.QINIUURL + this.form.file + '?vframe/jpg/offset/1';
						} else {
							console.log(res)
							uni.showToast({
								title: '上传失败，请重试',
								position: 'bottom',
								icon: 'none'
							})
						}
					},
					fail: err => {
						console.error(err);
						uni.showToast({
							title: '上传失败，请重试',
							position: 'bottom',
							icon: 'none'
						})
					},
				});
			},
			
			previewVideo: function () {
				let media = {
					file: this.QINIUURL + this.form.file
				}
				uni.navigateTo({
					url: '../video/video?media=' + encodeURIComponent(JSON.stringify(media))
				})
			},

		}
	}
</script>

<style lang="scss">
	@import '../../common/common.scss';
	.tips {
		font-size: 28rpx;
		color: $title-color;
		text-align: center;
		margin: 50rpx;
	}
	
	.cover-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		.cover-image {
			width: 480rpx;
			height: 480rpx;
			border-radius: 10rpx;
			background-color: $image-bg-color;
		}
		.player-icon {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			left: 50%;
			top: 50%;
			margin-left: -20rpx;
			margin-right: -20rpx;
		}
	}
	
	.btn-wrap {
		margin: 50rpx;
		padding: 0 50rpx;
	
		button {
			border-radius: 100rpx;
	
			& + button {
				margin-top: 40rpx;
			}
	
			&.camera {
				border: 1rpx solid $main-color;
				color: $main-color;
			}
		}
	}
</style>
